<template>
    <dialog-view :show="dialog.completeMode" v-on:close="dialog.completeMode = false" :closeStyle="'color:white;top:0.5rem;right:0.3rem'" class="dialog-order-complete">
        <div class="dialog-head-btn">
            <button-tab :height="46" v-model="choice.type">
                <button-tab-item selected>发票信息</button-tab-item>
                <button-tab-item>邮寄信息</button-tab-item>
            </button-tab>
        </div>
        <div class="dialog-content" v-if="choice.type===0">
            <div class="height6" v-for="invoice in invoiceList" :key="invoice.id">
                <flexbox @click.native="choiceInvoice(invoice)">
                    <flexbox-item span="50">
                        <div class="check-box-bg">
                            <img src="../../static/common/images/选中.png" v-if="invoice.id === choice.invoice ">
                        </div>
                    </flexbox-item>
                    <flexbox-item class="item-pt-1">
                        <div class="text-color m-b-0-2">
                            <span class="label-color">发票抬头</span>{{invoice.invoiceTitle}}
                        </div>
                        <div class="text-color">
                            <span class="label-color">税号</span>{{invoice.taxFileNumber}}
                        </div>
                    </flexbox-item>
                </flexbox>
                <div class="dialog-split-line"></div>
            </div>
            <div class="add-invoice">
                <flexbox orient="vertical">
                    <flexbox-item>
                        <img src="../../static/common/images/加.png" class="add-img"><span class="add-span">新增</span>
                    </flexbox-item>
                    <flexbox-item class="p1-5">
                        <flexbox>
                            发票类型
                            <flexbox-item span="120" class="check-p-l" @click.native="choiceInvoiceType('个人')">
                                <flexbox>
                                    <div class="add-check-box-bg">
                                        <img src="../../static/common/images/选中.png" v-if="invoice.type==='个人'">
                                    </div>
                                    <flexbox-item>
                                        个人
                                    </flexbox-item>
                                </flexbox>
                            </flexbox-item>
                            <flexbox-item span="120" style="padding-left: 1.2rem" @click.native="choiceInvoiceType('公司')">
                                <flexbox>
                                    <div class="add-check-box-bg">
                                        <img src="../../static/common/images/选中.png" v-if="invoice.type==='公司'">
                                    </div>
                                    <flexbox-item>
                                        公司
                                    </flexbox-item>
                                </flexbox>
                            </flexbox-item>
                        </flexbox>
                    </flexbox-item>
                    <flexbox-item>
                        <x-input title="发票抬头" placeholder="发票抬头" v-model="invoice.invoiceTitle" class="p1-5"></x-input>
                    </flexbox-item>
                    <flexbox-item>
                        <x-input title="税号" placeholder="税号" v-model="invoice.taxFileNumber" class="p1-5"></x-input>
                    </flexbox-item>
                    <flexbox-item class="item-btn">
                        <x-button mini class="btn-save" @click.native="saveInvoice">保存</x-button>
                    </flexbox-item>
                </flexbox>
            </div>
        </div>
        <div class="dialog-content" v-else>
            <div style="height: 10rem;" v-for="address in addressList" :key="address.id">
                <flexbox @click.native="choiceAddress(address)">
                    <flexbox-item span="50">
                        <div style="background: url('../../static/common/images/未选中.png') 0 0 / 1.5rem 1.5rem no-repeat;height: 1.5rem;margin-left: 1rem">
                            <img src="../../static/common/images/选中.png" v-if="address.id === choice.address " style="width: 1.4rem">
                        </div>
                    </flexbox-item>
                    <flexbox-item style="padding: 1rem 0">
                        <div style="color: #a8a8a8;margin-bottom: 0.2rem;">
                            <span style="margin-right: 1rem;font-size: 14px;color: #1b394e;">姓名</span>{{address.name}}
                        </div>
                        <div style="color: #a8a8a8;margin-bottom: 0.2rem;">
                            <span style="margin-right: 1rem;font-size: 14px;color: #1b394e;">手机号</span>{{address.mobile}}
                        </div>
                        <div style="color: #a8a8a8;margin-bottom: 0.2rem;">
                            <span style="margin-right: 1rem;font-size: 14px;color: #1b394e;">邮寄地址</span>{{address.address}}
                        </div>
                        <div style="color: #a8a8a8;">
                            <span style="margin-right: 1rem;font-size: 14px;color: #1b394e;">详细地址</span>{{address.addressDetail}}
                        </div>
                    </flexbox-item>
                </flexbox>
                <div class="dialog-split-line"></div>
            </div>
            <div class="add-address">
                <flexbox orient="vertical">
                    <flexbox-item>
                        <img src="../../static/common/images/加.png" class="add-img"><span class="add-span">新增</span>
                    </flexbox-item>
                    <flexbox-item>
                        <x-input title="姓名" placeholder="姓名" v-model="address.name" class="p1-5"></x-input>
                    </flexbox-item>
                    <flexbox-item>
                        <x-input title="手机号" placeholder="手机号" v-model="address.mobile" type="number" :min="11" :max="11" class="p1-5"></x-input>
                    </flexbox-item>
                    <flexbox-item>
                        <x-address title="邮寄地址" v-model="address.address" raw-value :list="addressData" value-text-align="left"></x-address>
                    </flexbox-item>
                    <flexbox-item>
                        <x-input title="详细地址" placeholder="详细地址" v-model="address.addressDetail" class="p1-5"></x-input>
                    </flexbox-item>
                    <flexbox-item class="item-btn">
                        <x-button mini class="btn-save" @click.native="saveAddress">保存</x-button>
                    </flexbox-item>
                </flexbox>
            </div>
        </div>
        <div class="dialog-btn">
            <x-button @click.native="dialog.completeMode = false">确认</x-button>
        </div>
    </dialog-view>
</template>
<script>
    import { XButton, Flexbox, FlexboxItem, ButtonTab, ButtonTabItem, XDialog, Checklist, Icon, XInput, XAddress, ChinaAddressData } from 'vux';

    import DialogView from '../components/DialogView';

    const baseInvoiceList = [
        {id: 1, invoiceTitle: "长安福特汽车有限公司", taxFileNumber: "2302500000"},
        {id: 2, invoiceTitle: "长安福特汽车有限公司", taxFileNumber: "2302500000"}
    ];
    const baseAddressList = [
        {id: 1, name: "张某某", mobile: "18551615490", address: "上海市静安区", addressDetail: "静安区万航渡路889号"}
    ];
    export default {
        name:"dialog-complete-view",
        components: {
            DialogView, XButton, Flexbox, FlexboxItem, ButtonTab, ButtonTabItem, XDialog, Radio, Checklist, Icon, XInput, XAddress, ChinaAddressData
        },
        model: {
            props:['addressDefault','invoiceDefault'],
            events: ['saveInvoice','saveAddress','confirmChoice']
        },
        data () {
            return {
                choice: {
                    type: null,
                    invoice: null,
                    address: null
                },
                invoice: {
                    type: null,
                    invoiceTitle: null,
                    taxFileNumber: null,
                },
                address: {
                    name: null,
                    mobile: null,
                    address: ['广东省', '深圳市', '南山区'],
                    addressDetail: null
                },
                addressData: ChinaAddressData,
                invoiceList: baseInvoiceList,
                addressList: baseAddressList
            }
        },
        methods: {
            choiceInvoice (invoice) {
                this.choice.invoice = invoice.id;
            },
            choiceInvoiceType (type) {
                this.invoice.type = type;
            },
            saveInvoice () {
                alert(this.invoice);
            },
            choiceAddress (address) {
                this.choice.address = address.id;
            },
            saveAddress () {
                alert(this.address);
            },
            choiceConfirm () {
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../styles/scss/_dialog-complete.scss";
</style>
